<template>
  <div class="moveDialog" v-show="flag" @click.self="close">
    <div class="main" ref="moveMain" >
      <div class="content">
        <div class="header">
          <!-- 可根据slot="title" 自定义标题 -->
          <slot name="title"></slot>
          <p v-if="!$slots.title">{{title}}</p>
        </div>
        <div class="form">
          <el-scrollbar class="scroll">
            <slot></slot>
          </el-scrollbar>
        </div>
      </div>
      <div class="footer">
        <!-- 可根据slot="btns" 自定义按钮 -->
        <slot name="btns"></slot>
        <div v-if="!$slots.btns">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirm">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'move-dialog',
  props: {
    // 控制显示隐藏
    showMoveDialog: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: '标题'
    },
    right: {
      type: String,
      default: '10px'
    },
    height: {
      type: String,
      default: '819px'
    }
  },
  watch: {
    showMoveDialog (newVal, oldVal) {
      if (newVal) {
        this.flag = true
        setTimeout(() => {
          this.$refs.moveMain.style.transform = 'translate(0)'
        }, 100)
      } else {
        this.$refs.moveMain.style.transform = 'translate(574px)'
        setTimeout(() => {
          this.flag = false
        }, 300)
      }
    }
  },
  data () {
    return {
      flag: false
    }
  },
  mounted () {
    this.$refs.moveMain.style.right = this.right
    this.$refs.moveMain.style.height = this.height
  },
  methods: {
    // 隐藏dialog
    close () {
      this.$emit('update:showMoveDialog', false)
    },
    // 取消
    cancel () {
      this.close()
    },
    // 确认
    confirm () {
      // 组件添加@confirm自定义事件，点击确认触发
      this.$emit('confirm')
    }
  }
}
</script>

<style lang='scss' scoped>
.moveDialog {
  text-align: left;
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  .main {
    max-width: 574px;
    width: 35%;
    height: 819px;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    right: 10px;
    transform: translate(574px);
    transition: transform 0.3s ease;
    box-shadow: -5px 0px 11px 1px rgba(0, 0, 0, 0.18);
    .content {
      display: flex;
      flex-direction: column;
      padding: 30px 30px 0;
      .header {
        margin-bottom: 38px;
        p {
          font-size: 18px;
          font-weight: bold;
          text-align: left;
        }
      }
      .form {
        height: 598px;
        .scroll {
          height: 100%;
          & /deep/ .el-scrollbar__wrap {
            overflow-x: hidden;
            .el-scrollbar__view {
              padding-right: 20px;
            }
          }
        }
      }
    }
    .footer {
      height: 60px;
      box-shadow: 0px -2px 6px 0px rgba(0, 0, 0, 0.18);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 0 42px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}
</style>
